<template>
  <div class="page-container">
    <div class="sidebar">
      <div class="sidebar-search">
        <ElInput
          v-model="state.sidebarSearch"
          clearable=""
          placeholder="搜索菜单"
          prefix-icon="Search"></ElInput>
      </div>
      <ElMenu
        class="sidebar-menu"
        :default-active="state.activeMenu"
        @select="handleMenuSelect">
        <ElSubMenu index="1">
          <template #title="scope_5b5nfsjg4">
            <span> OA审批</span>
          </template>
          <ElMenuItem index="1-1"> 请假申请</ElMenuItem>
          <ElMenuItem index="1-2"> 加班申请</ElMenuItem>
          <ElMenuItem index="1-3"> 报销申请</ElMenuItem></ElSubMenu
        >
        <ElSubMenu index="2">
          <template #title="scope_5h5nfsjg4">
            <span> 假勤管理</span>
          </template>
          <ElMenuItem index="2-1"> 考勤记录</ElMenuItem>
          <ElMenuItem index="2-2"> 排班管理</ElMenuItem></ElSubMenu
        >
        <ElSubMenu index="3">
          <template #title="scope_5m5nfsjg4">
            <span> 财务管理</span>
          </template>
          <ElMenuItem index="3-1"> 费用报销</ElMenuItem>
          <ElMenuItem index="3-2"> 借款申请</ElMenuItem></ElSubMenu
        >
        <ElSubMenu index="4">
          <template #title="scope_5r5nfsjg4">
            <span> 人事管理</span>
          </template>
          <ElMenuItem index="4-1"> 入职申请</ElMenuItem>
          <ElMenuItem index="4-2"> 离职申请</ElMenuItem></ElSubMenu
        >
        <ElMenuItem index="5"> 审计</ElMenuItem>
        <ElMenuItem index="6"> 工单</ElMenuItem></ElMenu
      >
    </div>
    <div class="main-content">
      <div v-show="state.showSearch" class="search-filter">
        <ElForm :model="state.searchForm" :inline="true">
          <ElFormItem label="流程名称">
            <ElInput
              v-model="state.searchForm.processName"
              clearable=""
              placeholder="请输入流程名称"></ElInput
          ></ElFormItem>
          <ElFormItem label="流程code">
            <ElInput
              v-model="state.searchForm.processCode"
              clearable=""
              placeholder="请输入流程code"></ElInput
          ></ElFormItem>
          <ElFormItem>
            <ElButton type="primary" @click="handleSearch"> 搜索</ElButton>
            <ElButton @click="handleReset"> 重置</ElButton>
            <ElButton type="text" @click="toggleSearch">
              收起</ElButton
            ></ElFormItem
          ></ElForm
        >
      </div>
      <div class="action-bar">
        <ElButton type="primary" @click="handleAdd">
          <ElIcon> <Plus></Plus></ElIcon>
          <span> 新增</span></ElButton
        >
        <ElButton :disabled="!state.selectedItems.length" @click="handleDelete">
          <ElIcon> <Delete></Delete></ElIcon>
          <span> 删除</span></ElButton
        >
        <ElButton :disabled="!state.selectedItems.length" @click="handleDeploy">
          <ElIcon> <Upload></Upload></ElIcon>
          <span> 部署</span></ElButton
        >
      </div>
      <ElTabs v-model="state.activeTab" class="content-tabs">
        <ElTabPane name="published" label="已发布流程">
          <ElTable
            :data="state.tableData"
            :style="{ width: '100%' }"
            border=""
            stripe=""
            class="ElTable_6v5nfsjg7"
            @selection-change="handleSelectionChange">
            <ElTableColumn type="selection" width="55"></ElTableColumn>
            <ElTableColumn
              prop="processName"
              label="流程名称"
              width="180"></ElTableColumn>
            <ElTableColumn
              prop="processCode"
              label="流程code"
              width="120"></ElTableColumn>
            <ElTableColumn
              prop="version"
              label="版本号"
              width="100"></ElTableColumn>
            <ElTableColumn prop="activeStatus" label="激活状态" width="120">
              <template #default="{ row }">
                <ElSwitch
                  v-model="row.activeStatus"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="
                    (...args: any[]) => change_725nfsjg7({ row }, args)
                  "></ElSwitch> </template
            ></ElTableColumn>
            <ElTableColumn prop="publishStatus" label="发布状态" width="120">
              <template #default="{ row }">
                <ElTag
                  :type="row.publishStatus === '已发布' ? 'success' : 'info'">
                  {{ row.publishStatus }}</ElTag
                >
              </template></ElTableColumn
            >
            <ElTableColumn label="操作" width="300">
              <template #default="{ row }">
                <ElButton
                  type="text"
                  @click="(...args: any[]) => click_785nfsjg8({ row }, args)">
                  编辑信息</ElButton
                >
                <ElButton
                  type="text"
                  @click="(...args: any[]) => click_7a5nfsjg8({ row }, args)">
                  查看流程</ElButton
                >
                <ElButton
                  type="text"
                  @click="(...args: any[]) => click_7c5nfsjg8({ row }, args)">
                  复制流程</ElButton
                >
                <ElButton
                  type="text"
                  @click="(...args: any[]) => click_7e5nfsjg8({ row }, args)">
                  导出流程</ElButton
                >
                <ElButton
                  type="text"
                  :style="{ color: '#f56c6c' }"
                  class="ElButton_7g5nfsjg8"
                  @click="(...args: any[]) => click_7g5nfsjg8({ row }, args)">
                  删除流程</ElButton
                >
              </template></ElTableColumn
            ></ElTable
          >
          <div class="pagination">
            <ElPagination
              v-model:current-page="state.currentPage"
              v-model:page-size="state.pageSize"
              :total="state.total"
              layout="total, sizes, prev, pager, next, jumper"
              :page-sizes="[10, 20, 50, 100]"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"></ElPagination></div
        ></ElTabPane>
        <ElTabPane name="unpublished" label="未发布流程">
          <div class="empty-data">
            <ElEmpty description="暂无未发布流程"></ElEmpty></div></ElTabPane
      ></ElTabs>
    </div>
  </div>
</template>
<script lang="ts">
  // @ts-nocheck
  import { defineComponent, reactive } from 'vue';
  import {
    ElInput,
    ElMenu,
    ElSubMenu,
    ElMenuItem,
    ElForm,
    ElFormItem,
    ElButton,
    ElTabs,
    ElTabPane,
    ElTable,
    ElTableColumn,
    ElSwitch,
    ElTag,
    ElPagination,
    ElEmpty
  } from 'element-plus';
  import { Plus, Delete, Upload } from '@vtj/icons';
  import { useProvider } from '@vtj/renderer';
  export default defineComponent({
    name: 'User',
    components: {
      ElInput,
      ElMenu,
      ElSubMenu,
      ElMenuItem,
      ElForm,
      ElFormItem,
      ElButton,
      Plus,
      Delete,
      Upload,
      ElTabs,
      ElTabPane,
      ElTable,
      ElTableColumn,
      ElSwitch,
      ElTag,
      ElPagination,
      ElEmpty
    },
    setup(props) {
      const provider = useProvider({ id: '18zx326v', version: '1755247019146' });
      const state = reactive({
        total: 5,
        pageSize: 10,
        activeTab: 'published',
        tableData: [
          {
            id: 1,
            processName: '请假申请流程',
            processCode: 'LEAVE_APPROVAL',
            version: '1.0.0',
            activeStatus: true,
            publishStatus: '已发布'
          },
          {
            id: 2,
            processName: '报销审批流程',
            processCode: 'REIMBURSE_APPROVAL',
            version: '2.1.3',
            activeStatus: false,
            publishStatus: '已发布'
          },
          {
            id: 3,
            processName: '出差申请流程',
            processCode: 'BUSINESS_TRIP',
            version: '1.5.2',
            activeStatus: true,
            publishStatus: '已发布'
          },
          {
            id: 4,
            processName: '入职审批流程',
            processCode: 'ONBOARDING',
            version: '3.0.1',
            activeStatus: true,
            publishStatus: '已发布'
          },
          {
            id: 5,
            processName: '离职审批流程',
            processCode: 'OFFBOARDING',
            version: '2.0.0',
            activeStatus: false,
            publishStatus: '已发布'
          }
        ],
        activeMenu: '1-1',
        searchForm: { processName: '', processCode: '' },
        showSearch: true,
        currentPage: 1,
        selectedItems: [],
        sidebarSearch: ''
      });
      return { state, props, provider };
    },
    methods: {
      change_725nfsjg7({ row }, args) {
        return (($event) => {
          this.handleStatusChange(row);
        }).apply(this, args);
      },
      click_785nfsjg8({ row }, args) {
        return (($event) => {
          this.handleEdit(row);
        }).apply(this, args);
      },
      click_7a5nfsjg8({ row }, args) {
        return (($event) => {
          this.handleView(row);
        }).apply(this, args);
      },
      click_7c5nfsjg8({ row }, args) {
        return (($event) => {
          this.handleCopy(row);
        }).apply(this, args);
      },
      click_7e5nfsjg8({ row }, args) {
        return (($event) => {
          this.handleExport(row);
        }).apply(this, args);
      },
      click_7g5nfsjg8({ row }, args) {
        return (($event) => {
          this.handleDelete(row);
        }).apply(this, args);
      },
      handleAdd() {
        console.log('新增流程');
      },
      handleCopy(row) {
        console.log('复制:', row);
      },
      handleEdit(row) {
        console.log('编辑:', row);
      },
      handleView(row) {
        console.log('查看:', row);
      },
      handleReset() {
        this.state.searchForm = { processName: '', processCode: '' };
      },
      handleDelete(row) {
        if (row) {
          console.log('删除单个流程:', row);
        } else {
          console.log('批量删除:', this.state.selectedItems);
        }
      },
      handleDeploy() {
        console.log('部署流程:', this.state.selectedItems);
      },
      handleExport(row) {
        console.log('导出:', row);
      },
      handleSearch() {
        console.log('搜索:', this.state.searchForm);
      },
      toggleSearch() {
        this.state.showSearch = !this.state.showSearch;
      },
      handleRefresh() {
        console.log('刷新数据');
      },
      handleSettings() {
        console.log('设置');
      },
      handleTabChange(tab) {
        console.log('切换标签页:', tab);
      },
      handleFullscreen() {
        console.log('全屏');
      },
      handleMenuSelect(index, indexPath) {
        console.log('菜单选择:', index, indexPath);
        this.state.activeMenu = index;
      },
      handleSizeChange(size) {
        console.log('每页条数变更:', size);
        this.state.pageSize = size;
      },
      handleStatusChange(row) {
        console.log('激活状态变更:', row);
      },
      handleCurrentChange(page) {
        console.log('当前页变更:', page);
        this.state.currentPage = page;
      },
      handleSelectionChange(selection) {
        this.state.selectedItems = selection;
      }
    }
  })
</script>
<style lang="css" scoped>
  .page-container {
    display: flex;
    height: 100vh;
    background-color: #f0f2f5;
  }
  .sidebar {
    width: 220px;
    background-color: #fff;
    border-right: 1px solid #e6e6e6;
    display: flex;
    flex-direction: column;
  }
  .sidebar-search {
    padding: 15px;
    background-color: #f5f7fa;
  }
  .sidebar-menu {
    flex: 1;
    border-right: none;
  }
  .main-content {
    flex: 1;
    padding: 20px;
    overflow: auto;
    background-color: #fff;
  }
  .search-filter {
    background-color: #f5f7fa;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
  }
  .action-bar {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .action-icons {
    margin-left: auto;
  }
  .action-icons .icon {
    margin-left: 12px;
    cursor: pointer;
    color: #606266;
  }
  .action-icons .icon:hover {
    color: #409eff;
  }
  .content-tabs {
    margin-bottom: 20px;
  }
  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
  .empty-data {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fafafa;
    border-radius: 4px;
  }
</style>
